<template>
	<view >
		<uni-nav-bar left-icon="left"  :statusBar="true" titleSize="30px" leftText="返回" rightText="新建"  title="项目管理"  @clickLeft="back" @clickRight="addBtn" :fixed="true" backgroundColor="#3286ed" color="#fff"/>
	    <!-- 筛选功能 -->
	    <view v-if="searchShow==false" style="position: fixed;z-index: 100;width:100%;">
	    	<uni-row class="demo-uni-row">
	    		<uni-col :span="15">
	    			<view class="title"  >当前数据共{{total}}条</view>
	    		</uni-col>
	    		<uni-col :span="3">
	    			<view class="title"  style="color:#c3c3c3">|</view>
	    		</uni-col>
	    		<uni-col :span="6">
	    			<view class="title" style="padding-right: 30px;" @click="searchBtn">筛选</view>
	    		</uni-col>
	    	</uni-row>
	    </view>
		<view v-if="searchShow==false" style="width:100%;height: 32px;display: block;margin-bottom: 10px;"></view>
		<!-- 列表 -->
       <u-swipe-action>
       	 <view v-for="(item,index) in list" :key="item.id" style="padding:5px;">
       		 <u-swipe-action-item :options="options1" :disabled="disabledShow" @click="delFn(item.id)" >
       		    <view class="list"  @click="detailsBtn(item.id)">
       		 	   <view class="title" >客户姓名：{{item.customerName}}</view>
       		 	   <view class="desc">项目名:{{item.projectName}}</view>
       		 	   <view class="desc">项目联系人:{{item.receiverName}}</view>
				   <view class="desc">负责人:{{item.userName}}</view>
       		    </view>
       		 </u-swipe-action-item>
       	 </view>
       </u-swipe-action>
		   <view v-if="list.length ==0 && searchShow==false" class="BGC"></view>
		   <!-- 消息提示 -->
		   <u-toast ref="uToast"></u-toast>
		   <u-popup closeable="true" class="popBox" :show="show"  @close="closeBtn" customStyle="margin-top:44px;min-width:300px;" overlayStyle="margin-top:44px"  mode="right"  :closeOnClickOverlay="true" >
		         <u-cell>
		   		  <template #title>
		   			  <view>筛选</view>
		   		  </template>
		   	  </u-cell>
		   	  <u-cell>
		   		  <template #title>
		   			  <view>客户名称</view>
		   		  </template>
		   	  </u-cell>
			  <view style="padding: 8px 10px;border-bottom: solid 1px #c3c3c3;">
				   <u--input  placeholder="请输入客户名称"  v-model="formData.customerName"  ></u--input>
			  </view>
			  <u-cell>
				  <template #title>
					  <view>项目名称</view>
				  </template>
			  </u-cell>
			  <view style="padding: 8px 10px;border-bottom: solid 1px #c3c3c3;">
			  	   <u--input  placeholder="请输入项目名称"  v-model="formData.projectName"  ></u--input>
			  </view>
			  <u-cell>
			  <template #title>
				  <view>联系人电话</view>
			  </template>
			  </u-cell>
			  <view style="padding: 8px 10px;border-bottom: solid 1px #c3c3c3;">
			  	   <u--input  placeholder="请输入联系人电话"  v-model="formData.projectTel"  ></u--input>
			  </view>
		   	  <view class="button">
		   		 <view style="display: flex;justify-content: space-evenly;">
		   			 <view class="bit" style="border-right: solid 1px #c3c3c3;" @click="resetBtn">重置</view>
		   			 <view class="bit" @click="BtnOk">确认</view>
		   		 </view>
		   	  </view>
		   	  
		   </u-popup>
	</view>
</template>

<script>
	import {ProjectList,delProject } from '@/api/project.js'
	export  default {
		data(){
			return{
				formData:{
					pageNum:1,
					pageSize:10,
					customerName:'',
					projectName:'',
					projectTel:''
					
				},
				list:[],
				total:0,
				permissions:[],
				option:[],
				show:false,
				disabledShow:false,
				searchShow:false,
				searchShow:false,
				options1:[{text:'删除'}]
			}
		},
		onLoad(){
			this.permissions=this.$store.getters.permissions
			this.initData()
			// 控制删除按钮权限出现
			if(this.permissions.includes('*:*:*') ||this.permissions.includes('module:project:delete')){
			     this.disabledShow=false
			}
		},
		onReachBottom(){
			// 上划加载
			if(this.list.length==this.total){
				this.formData.pageNum=1
				return false
			}
			this.formData.pageNum++
			ProjectList(this.formData).then(response=>{
				console.log(response);
				this.list.push(...response.rows)
				 console.log(this.list);
			})
			
		},
		onPullDownRefresh(){
			// 下拉加载
			this.formData.pageNum=1
			this.list=[]
			setTimeout(()=>{
				this.initData()
				uni.stopPullDownRefresh()
			},1000)
		},
		methods:{
			back(){
				uni.switchTab({
					url:'/pages/index'
				})
			},
			addBtn(){
				if(this.permissions.includes('*:*:*') ||this.permissions.includes('module:project:delete')){
				    uni.navigateTo({
				    	url:'/pages/projectFiling/addProject/index'
				    })
				}else{
					this.$refs.uToast.show({
						type:'default',
						message:'您没有权限新增!'
					})
				}
				
			},
			async initData(){
			const res=  await	ProjectList(this.formData)
			console.log(res);
			this.list=res.rows
			this.total=res.total
			},
			// 删除
			async delFn(id){
				console.log(id);
				this.disabledShow=true					
				const res=await delProject(id)
				if(res.code==200){
					this.$refs.uToast.show({
						type:'success',
						message:'删除成功！',
					})
				}
				this.disabledShow=false
				this.initData()
			},
			// 点击跳转详情
			detailsBtn(id){
				uni.navigateTo({
					url:"/pages/projectFiling/details/index?id="+id
				})
			},
			searchBtn(){
				this.show=true
			},
			closeBtn(){
				this.show=false
			},
			resetBtn(){
				this.formData={
					pageNum:1,
					pageSize:10,
					customerName:'',
					projectName:'',
					projectTel:''
				}
			},
			BtnOk(){
				this.list=[]
				this.initData()
				this.formData={
					pageNum:1,
					pageSize:10,
					customerName:'',
					projectName:'',
					projectTel:''
				}
				this.show=false
			}
			
		}
	}
</script>

<style lang="scss">
	.BGC{
		width: 100%;
		min-height: 400px;
		background-image: url('@/static/images/bgc.png');
		background-size:100% 200px;
		background-repeat: no-repeat;
			margin: 200px 0;
	}
	// 下拉选择框
	.demo-uni-row {
		margin-bottom: 10px;
			// position: fixed;
		/* QQ、字节小程序文档写有 :host，但实测不生效 */
		/* 百度小程序没有 :host，需要设置block */
		/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
		display: block;
		/* #endif */
			
			.title{
				height:38px;
				line-height: 38px;
				background-color: #ffffff;
				text-align: center;
				font-size: 13px;
			}
	}
	.list{
		border: solid 1px #c3c3c3;
		padding: 10px;
		.title{
			font-size: 14px;
			font-weight: 600;
		}
		.desc{
			font-size: 12px;
		}
	}
	.popBox{
		position: relative;
		.button{
			width: 100%;
			position: absolute;
			bottom: 0;
			.bit{
				width: 100%;
				height: 40px;
				text-align: center;
				padding-top: 10px;
				border-top: solid 1px #c3c3c3;
				
			}
		}
	}
</style>